<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
				input:checked+span{background:#f00;}
				input:checked+span:after{content:" 我被选中了";}
				input:checked+i{background:blue;}
				input:checked+i:after{content:" 我被选中了";}
		</style>
	</head>
	<body>
		<p>
		*		通配
		p       元素（标签）
		.  		类名
		
		[attr] 	属性选择器(attr代表属性名)
		[attr="haha"] 匹配属性全等
						以haha开头的值
						以haha结束的值
						以haha为前缀并且用-链接的值
						包含haha的值并且是用空格隔开的值
						包含haha的值
						
		关系选择器：
		A B 		后代选择器（A下面所有的B）
		A>B 		子选择器（A的B子元素）
		A+B 		相邻选择器（A后的一个B元素）
		A~B 		兄弟选择器（A后的所有B元素）
		
		伪类：
			-交互
				select：link  		a标签 未访问时的样式（默认）
				s: visited 			a标签 已访问的样式
				s: hover 			鼠标覆盖在元素上的样式
				s: active 			a标签 点击时的样式
				
				s:focus 			输入框 获得焦点时的样式
				s:checked  			单/复选的选中状态样式
				
			-找元素
				li:nth-of-child(n) 	匹配第n个li儿子
				li:nth-of-type(n) 	匹配第n个li元素
				
				li:not() 			匹配除了某个选择器以外的其他元素
				
				<!--写法没有错误，但是存在逻辑的误区-->
				li:not(li:nth-of-type(3)),	li:not(li:nth-of-type(4)){
				}
	
			盒子模型
		</p>	
	</body>
		<div>选中下面的项试试
	<ul>
		<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
		<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
		<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
	</ul></div>
		<div>
			选中下面的项试试
	<ul>
		<li><label><input type="checkbox" name="colour-group2" value="0" /><i>蓝色</i></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="1" /><i>红色</i></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="2" /><i>黑色</i></label></li>
	</ul></div>
	</body>
</html>
